<nz-row>
  <div class="rule-box" *ngIf="properties && properties.length>0">
    <nz-select [(ngModel)]="rule.Field" nzSize="small" (ngModelChange)="fieldChange($event)" class="f-left">
      <nz-option *ngFor="let property of properties" [nzValue]="property.Name" [nzLabel]="property.Display"></nz-option>
    </nz-select>
    <nz-select [(ngModel)]="rule.Operate" nzSize="small" class="f-left">
      <nz-option *ngFor="let entry of operateEntries" [nzValue]="entry.Operate" [nzLabel]="entry.Display"></nz-option>
    </nz-select>

    <div *ngIf="property" class="f-left">
      <!--布尔类型-->
      <ng-container *ngIf="property.TypeName=='System.Boolean'; else NotBoolean">
        <nz-select [(ngModel)]="rule.Value" nzSize="small">
          <nz-option nzValue="true" nzLabel="是"></nz-option>
          <nz-option nzValue="false" nzLabel="否"></nz-option>
        </nz-select>
      </ng-container>
      <ng-template #NotBoolean>
        <!--数值类型-->
        <ng-container *ngIf="property.TypeName=='System.Int32'; else NotNumber">
          <!--枚举类型-->
          <ng-container *ngIf="property.ValueRange.length>0; else NotEnum">
            <nz-select [(ngModel)]="rule.Value" nzSize="small">
              <nz-option *ngFor="let value of property.ValueRange" [nzValue]="value.id" [nzLabel]="value.text"></nz-option>
            </nz-select>
          </ng-container>
          <ng-template #NotEnum>
            <!--用户类型-->
            <ng-container *ngIf="property.IsUserFlag&&rule.Operate==3; else NotUser">
              <nz-select [(ngModel)]="rule.Value" nzMode="tags" nzMaxMultipleCount="1" (ngModelChange)="onTagsChangeEvent($event)" nzSize="small">
                <nz-option nzValue="@CurrentUserId" nzLabel="@当前用户"></nz-option>
              </nz-select>
            </ng-container>
            <ng-template #NotUser>
              <!--数值类型-->
              <nz-input-number [(ngModel)]="rule.Value" nzSize="small"></nz-input-number>
            </ng-template>
          </ng-template>
        </ng-container>
        <ng-template #NotNumber>
          <!--时间类型-->
          <ng-container *ngIf="property.TypeName=='System.DateTime'; else NotDateTime">
            <nz-date-picker nzShowTime [(ngModel)]="rule.Value" nzFormat="yyyy-MM-dd HH:mm" nzPlaceHolder="Select Time" nzSize="small"></nz-date-picker>
          </ng-container>
          <ng-template #NotDateTime>
            <!--其他类型，使用字符串-->
            <input nz-input [(ngModel)]="rule.Value" nzSize="small" />
          </ng-template>
        </ng-template>
      </ng-template>
    </div>
    <button nz-button (click)="removeRule()" nzType="default" nzSize="small" nzShape="circle" class="f-left">
      <i class="anticon anticon-close"></i>
    </button>
  </div>
</nz-row>
